<template>
  <section class="full-height">
    <h1 class="bg-panda-dark-dark line-height-30px panda-font-size panda-px-10px">{{ showTitle }}</h1>
    <q-scroll-area :style="list_height_style">
      <ul :style="list_height_style">
        <li
          v-for="(item, index) in info"
          :key="index"
          class="line-height-36px border-bottom panda-px-10px"
        >
          <q-radio v-if="show_radio" v-model="play_method" :val="item" :label="item" @click.native="reverseItem" :key="num"></q-radio>
          <q-checkbox
            v-else
            v-model="play_method_collection"
            :val="item"
            :label="item"
            @input="change_title"
          ></q-checkbox>
        </li>
      </ul>
    </q-scroll-area>
    <editBtn v-if="show_btn" @save="save" />
  </section>
</template>
<script>
import { maxHeaderSize } from 'http';
import { closeSync } from 'fs';
export default {
  components: {
    editBtn: () =>
      import("src/pages/setting/playrules/edit/component/component/editBtn.vue")
  },
  props: {
    title: {
      default: "关联BC玩法"
    },
    info: {
      default() {
        return ["sdfd", "456465"];
      }
    },
    show_radio: {
      default: true
    },
    show_btn: {
      default: true
    }
  },
  data() {
    return {
      showTitle: this.title,
      play_method: "",
      // 滚动高度
      list_height_style: {
        height: this.show_btn ? "calc(100% - 100px)" : "calc(100% - 80px)"
      },
      play_method_collection: [],
      num: 0,
      record: ''
    };
  },
  methods: {
    // 保存玩法信息
    save() {
      if (this.show_radio) {
      } else {
      }
    },
    // 取消选择
    abort() {
      if (this.show_radio) {
      } else {
      }
    },
    // 改变头部标题复选框模式
    change_title(value) {
      let len = value.length;
      let str = value[len - 1];
      this.showTitle = this.title;
      str && (this.showTitle += `- ${str}`);
    },
    // 反选功能支持
    reverseItem () {
      if (this.record !== this.play_method) {
        this.record = this.play_method
      } else {
        this.record = this.play_method = '' 
        this.num++
      }
    }
  }
};
</script>